import { t } from 'i18next'
import React, { FC } from 'react'
import shallow from 'zustand/shallow'
import { ListFormItem } from '../../components/RightWrap/ListFormItem'
import { RadioGroup, Select, CheckBox, InputNumber } from '@kedacom/react-next'
import { TAB, SmsListModel, PositionOption, SpeedOption } from './translator'
import { RightWrap, ListItemGhost } from '../../components'
import { ListEmpty, ListTop } from '@/components/List'
import { Droppable, Draggable, DragDropContextProvider } from '@/plugins/dnd'
import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
import { ListItem } from './ListItem'
import { Text } from './Text'
import { Wrap, Label, Separator } from './style'
import { useData } from './hooks'
import { useSmsStore } from './store'
import { revert_mt } from '@/api/manager/mt'
import { useMccStore } from '../../store'
import { actionButtonsCancel } from '../../store.actionButton'
import { useParamsStore } from '../main/store'

interface RowRendererProps extends ListChildComponentProps {
	data: SmsListModel
}
const rowRenderer = React.memo(({ data: list, index, style }: RowRendererProps) => {
	const rowData = list[index]
	const dataTransfer = () => {
		return {
			data: {
				mt: revert_mt(rowData.mcc),
				sms: {},
			},
			from: 'sms',
		}
	}
	return (
		<Draggable
			style={style}
			index={index}
			dataTransfer={dataTransfer}
			ghostRender={<ListItemGhost data={rowData.mcc} />}
		>
			<ListItem {...rowData} />
		</Draggable>
	)
})
const Sms: FC = () => {
	const { validateRollTime, handleDrop, topActions } = useData()

	const { receiVTerminal, list, showSpeedAndroll, model, speed, rollTime, rollTimeChecked, update, reset } =
		useSmsStore(
			(state) => ({
				receiVTerminal: state.receiVTerminal,
				list: state.list,
				showSpeedAndroll: state.showSpeedAndroll,
				model: state.model,
				speed: state.speed,
				rollTime: state.rollTime,
				rollTimeChecked: state.rollTimeChecked,
				update: state.update,
				reset: state.reset,
			}),
			shallow
		)
	return (
		<>
			<RightWrap
				title={t('短消息')}
				onBack={() => {
					useMccStore.getState().setCurPage('mcc_main')
					actionButtonsCancel()
					reset()
				}}
			>
				<ListFormItem label={t('发送至')} height={28}>
					<div>
						<RadioGroup
							value={receiVTerminal}
							options={TAB}
							onChange={(e, value) => {
								if (value === 1) {
									useParamsStore.getState().hideActionButton()
								} else {
									useParamsStore.getState().showActionButton()
								}
								update({ receiVTerminal: value })
							}}
						/>
					</div>
				</ListFormItem>
				{receiVTerminal === 2 && (
					<>
						<ListTop title={t('接收终端列表')} num={list.length} actions={topActions} />
						<DragDropContextProvider>
							<Droppable onDrop={handleDrop}>
								{(setDroppableRef) =>
									list.length > 0 ? (
										<List
											width={'auto'}
											height={190}
											itemCount={list.length}
											itemSize={32}
											itemData={list}
											outerRef={setDroppableRef}
											itemKey={(index, data) => data[index].mtKey}
										>
											{rowRenderer}
										</List>
									) : (
										<ListEmpty width={280} height={190} outerRef={setDroppableRef} />
									)
								}
							</Droppable>
						</DragDropContextProvider>
						<Separator></Separator>
					</>
				)}
				<Text></Text>
				<Wrap>
					<Label title={t('显示模式')} className="sms-label__i18n">
						{t('显示模式')}
					</Label>
					<Select
						className="sms-display-mode-select__i18n showModel"
						panelClassName="sms-display-mode-panel__i18n"
						options={PositionOption}
						value={model}
						width={214}
						onChange={(e, val) => {
							update({ model: val })
						}}
					/>
				</Wrap>
				{showSpeedAndroll && (
					<>
						<Wrap>
							<Label title={t('速度')} className="sms-label__i18n">
								{t('速度')}
							</Label>
							<Select
								className="sms-speed-select__i18n"
								panelClassName="sms-speed-select-panel__i18n"
								options={SpeedOption}
								value={speed}
								onChange={(e, val) => {
									update({ speed: val })
								}}
								width={66}
							/>
						</Wrap>
						<Wrap>
							<Label title={t('滚动次数')}>{t('滚动次数')}</Label>
							<InputNumber
								value={rollTime}
								maxLength={128}
								onChange={(e, v) => {
									validateRollTime(v)
								}}
								width={60}
								disabled={rollTimeChecked}
							/>
							<span className="time sms-scroll-msg__i18n">{t('1~254次')}</span>
							<CheckBox
								checked={rollTimeChecked}
								onChange={(e, checked) => {
									update({
										rollTimeChecked: checked,
										rollTime: checked ? '' : 1,
									})
								}}
							>
								{t('不限次数')}
							</CheckBox>
						</Wrap>
					</>
				)}
			</RightWrap>
		</>
	)
}
export default Sms
